<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8"/>
    <title>Metronic | Dashboard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <% include ../common/resource-top.ejs %>

    <!-- END HEAD -->

<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
<div class="page-wrapper" id="app" v-cloak>
    <!-- BEGIN HEADER -->
    <% include ../common/menu-top.ejs %>

    <div class="page-container">
        <!-- BEGIN SIDEBAR -->

        <% include ../common/menu-left.ejs %>

        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="theme-panel hidden-xs hidden-sm" style="width: 150px;">
                    <input type="submit" class="btn green-sharp btn-outline  sbold upperse" value="add department"
                           v-on:click="modal_add()">
                </div>

                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li>
                            <a href="index.html">Home</a>
                            <i class="fa fa-circle"></i>
                        </li>
                        <li>
                            <span>Dashboard</span>
                        </li>
                    </ul>
                </div>
                <h1 class="page-title"> Dashboard 2
                    <small>dashboard &amp; statistics</small>
                </h1>

                <div class="portlet box green">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-cogs"></i>department list </div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
                            <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
                            <a href="javascript:;" class="reload" data-original-title="" title=""> </a>
                            <a href="javascript:;" class="remove" data-original-title="" title=""> </a>
                        </div>
                    </div>
                    <div class="portlet-body flip-scroll">
                        <table class="table table-bordered table-striped table-condensed flip-content">
                            <thead class="flip-content">
                            <tr>
                                <th> #</th>
                                <th> departmentName</th>
                                <th> departmentType</th>
                                <th> companyKey</th>
                                <th> createTime</th>
                                <th> updateTime</th>
                                <th> operator</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in departmentList">
                                <td>{{ item.key }}</td>
                                <td>{{ item.DepartmentName }}</td>
                                <td>{{ item.Departmenttype }}</td>
                                <td>{{ item.Companykey }}</td>
                                <td>{{ item.CreateTime }}</td>
                                <td>{{ item.UpdateTime }}</td>
                                <td>
                                    <button type="button" class="btn green btn-outline"
                                            v-on:click="modal_update(item)">update
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>


            </div>
        </div>
        <a href="javascript:;" class="page-quick-sidebar-toggler">
            <i class="icon-login"></i>
        </a>
    </div>
    <div class="page-footer">
        <div class="page-footer-inner"> 2016 &copy; Metronic Theme By
            <a target="_blank" href="http://keenthemes.com">Keenthemes</a> &nbsp;|&nbsp;
            <a href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes"
               title="Purchase Metronic just for 27$ and get lifetime updates for free" target="_blank">Purchase
                Metronic!</a>
        </div>
        <div class="scroll-to-top">
            <i class="icon-arrow-up"></i>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="portlet light ">
                        <div class="portlet-title">
                            <div class="caption font-red-sunglo">
                                <i class="icon-settings font-red-sunglo"></i>
                                <span class="caption-subject bold uppercase"> {{ modal.title }} department</span>
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <div class="form-body">
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_1"
                                           placeholder="Enter your department name" v-model="modal.department.name">
                                    <label for="form_control_1">department name</label>
                                    <span class="help-block">Some help goes here...</span>
                                </div>
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_2"
                                           placeholder="Enter your department type" v-model="modal.department.type">
                                    <label for="form_control_2">department type</label>
                                </div>
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_3"
                                           placeholder="Enter your company key" v-model="modal.department.companykey">
                                    <label for="form_control_3">company key</label>
                                </div>
                            </div>

                            <div class="form-actions noborder">
                                <button type="submit" class="btn blue"
                                        v-on:click="modal_update_submit()"
                                        v-if="modal.title == 'Update'">Submit
                                </button>
                                <button type="submit" class="btn blue"
                                        v-on:click="modal_add_submit()" v-else>Submit
                                </button>
                                <button type="button" class="btn default" data-dismiss="modal">cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


</div>
<% include ../common/resource-bottom.ejs %>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            modal: {"title": "", department: {}},
            departmentList: [],
        },
        methods: {
            departmentListGet: function () {
                const that = this;
                BUIShow()
                var params = {pageNo: 1, pageSize: 100}
                this.$http.get("/department/list", {
                    params: params,
                }).then(function (res) {
                    BUIHide()
                    getResponse(res, function (r) {
                        that.departmentList = r.list;
                    });
                });
            },

            modal_add: function () {
                this.modal.title = "Add";
                this.modal.department = { // 需要添加的字段 lionel
                    departmentname: "",
                    departmenttype: "",
                    companykey: "",
                };
                $("#update").modal();
            },
            modal_add_submit: function () {
                const that = this;
                BUIShow()
                this.$http.post("/department/add", {
                    DepartmentName: that.modal.department.name,
                    DepartmentType: that.modal.department.type,
                    CompanyKey: that.modal.department.companykey,
                }).then(function (res) {
                    BUIHide()
                    getResponse(res, function (r) {
                        that.departmentListGet();
                        $('#update').modal('hide');
                    });
                });
            },
            modal_update: function (item) {
                this.modal.title = "Update";
                this.modal.department = item;

                $("#update").modal();
            },
            modal_update_submit: function () {
                const that = this;
                this.$http.post("/department/update", {
                    key: that.modal.department.key,
                    DepartmentName: that.modal.department.name,
                    DepartmentType: that.modal.department.type,
                    CompanyKey: that.modal.department.companykey,
                }).then(function (res) {
                    $(".page-spinner-bar").hide()
                    getResponse(res, function (r) {
                        that.departmentListGet();
                        $('#update').modal('hide');
                    });
                });
            },

        },
        created: function () {
            this.departmentListGet();
        },
    })


</script>

</body>